<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品管理系统</title>
    <link rel="stylesheet" href="./list.css">

</head>
<body>
<div class="father">
    <div class="Nav">
        <div class="search-container">
            <div class="search-group">
                <span class="search-label">商品搜索:</span>
                <input type="text" placeholder="请输入商品名称/关键字/ID" id="searchInput" class="search-input">
                <i class="search-icon">🔍</i>
                <div class="suggestions-container" id="suggestionsContainer"></div>
            </div>

            <div class="search-group">
                <span class="search-label">商品类型:</span>
                <input type="text" list="myData" placeholder="全部" id="searchInput1" class="search-input">
                <datalist id="myData">
                    <option value="普通商品"></option>
                    <option value="卡密商品"></option>
                    <option value="优惠卷商品"></option>
                    <option value="虚拟商品"></option>
                </datalist>
            </div>

        </div>
    </div>
    <div class="box">
        <div class="header">
            <a class="active"> 添加商品</a>
            <a> 导出</a>
        </div>
        <div class="content">
            <table>
                <thead>
                <tr>
                    <th width="50"><input type="checkbox" name="box[]"></th>
                    <th width="100">商品ID</th>
                    <th width="300">商品名称</th>
                    <th width="120">商品类型</th>
                    <th width="100">商品售价</th>
                    <th width="80">销量 </th>
                    <th width="80">库存 </th>
                    <th width="80">排序</th>
                    <th width="100">状态</th>
                    <th width="180">操作</th>
                </tr>
                </thead>
                <tbody id="productTableBody">
                </tbody>
            </table>
            <div class="pagination">
                <span class="pagination-info" id="paginationInfo"></span>
                <button id="prevPage">上一页</button>
                <div id="pageNumbers"></div>
                <button id="nextPage">下一页</button>
            </div>
        </div>
    </div>
    <div class="pop">
        <span>X</span>
    </div>
</div>


<script src="list.js"></script>
</body>
</html>